<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Ajax 和 comet</title>
  <style>
    p {
      line-height: 40px;
      text-indent: 2em
    }
    span {
      color: red
    }
  </style>
</head>
<body>
  <h2>XHR 对象</h2>
  <p>
    1.Ajax 技术能够向服务器请求额外的数据，而无需重新加载页面,核心是 XMLHttpRequest(XHR)，另外，虽然名字中包含 XML 的成分，但 Ajax 通信与数据格式无关
  </p>
  <p>
    2.IE7 之后，可以直接用XMLHttpRequest 构造函数去创建 XHR 对象。要是一定要支持 IE7 之前的浏览器，用 ActiveXObject 代替之
  </p>
  <p>
    3.使用 XHR 对象时，要调用的第一个方法是 open(),接受 3 个参数。要发送的请求类型，<span>（但并不是真正的发送请求）</span>，请求 URL<span>（URL 得属于同一个域中）</span>，和表示是否异步的布尔值。<span>(false 表示不异步，即同步)</span>
  </p>
  <p>
    4.要发送特定的请求，还得调用 send（）方法。send 接受一个参数，即作为请求主体发送的数据,如果不需要通过请求主体发送数据，则必须传入 null.因为在有些浏览器中是必须的。
    <h3>响应数据属性如下</h3>
    <ul>
      <li>1.responseText: 作为响应主体被返回的文本</li>
      <li>2.responseXML: 响应数据的 DOM文档</li>
      <li>3.status: 响应的 HTTP 状态。200表示成功。304 表示请求的资源并没有进行过修改，可直接使用浏览器的缓存</li>
      <li>4.statusText: HTTP 状态的说明</li>
    </ul>
  </p>
  <p>
    5.大部分时间我们还是要发送异步请求。可以检测 XHR对象的 readyState 属性，该属性在 readystatechange事件中监听。<span>必须在调用 open 之前调用 readystatechange才能保证跨浏览器的兼容性</span>
    <h3>readyState属性可取值</h3>
    <ul>
      <li>3： 以接收到部分响应式数据</li>
      <li>4： 已经接受到了全部响应式数据，此时已经与服务器断开连接</li>
    </ul>
    在接受到响应之前还可以调用 abort()来取消异步请求，调用这个方法后 XHR 会停止触发事件，而且也不再允许访问任何与响应有关的对象属性
  </p>
  <p>
    6.每个 HTTP请求和响应都会带有相应的头部信息。有的有用，有的没什么用。比如 accept-language 表示浏览器当前设置的语言，cookie 表示浏览器当前设置的 cookie ，User-Agent 表示浏览器的用户代理字符串等等。。。
  </p>
  <p>
    7.可以使用 setRequestHeader()方法可以设置自定义的请求头部信息，参数为设置的名称和设置的值。在 open 之后，send 之前调用。建议 <span>用户使用自定义头部字段名称，不要使用浏览器正常发送的字段名称。否则可能会影响浏览器的响应</span>
  </p>
  <p>
    8.get 请求最常用于服务器查询某些信息。对 XHR 而言，这些参数 <span>必须</span>要经过 encodeURIComponent()编码才行
  </p>
  <p>
    9.post请求传递的数据需要进行序列化。可以包含非常多的数据<span>相较于 get</span>，但是 post 请求的资源消耗会更高一些
  </p>
  <p>
    10.FormData 为序列化表单以及创建对象与表单格式相同的数据提供了便利。XHR 对象能顾识别传入数据类型是 FormData 实例，并配置适当的头部信息
  </p>
  <p>
     11.XHR 设置超时 timeout。<span>进度事件：每个请求都从 loadStart,事件开始，接下来是一个或者多个 procsss 事件，然后触发 error/abort/load 事件中的一个，最后以 loadend 事件结束</span>，目前还没有浏览器支持 loadend事件
  </p>
  <h2>跨域资源共享</h2>
  <p>
    1.通过实现 Ajax 通信的一个主要限制，来源于跨域安全策略。默认情况下，XHR 对象只能访问同一个域中的资源
  </p>
  <p>
     2.<h4>CORS 跨域: 基本思想是使用自定义的 HTTP 头部，让浏览器域服务器沟通。从而决定响应式成功还是失败。<span>服务器也要有相应的配置</span></h4>
  </p>
  <h2>除了 CORS 之外其他跨域技术</h2>
  <p>
    1.图片 src 跨域：本质是 get 请求，无法访问服务器的响应文本 <br>
    2.JSONP:自定义 script 标签-> 将请求与回调函数作为 script 的src-> 服务器返回回调函数，并在浏览器执行
    依然只是 get 请求，并且不能保证其他域的代码就一定安全。
  </p>

</body>
</html>